<template>
  <div>
    <h3>审批</h3>
    <h2>测试腾讯云存储桶</h2>
    <input type="file" @change="updatePhoto" ref="photo" />
    <img :src="url" alt="" />
    <h3>测试上传图片组件</h3>
    <imgupload :imgUrl.sync="imgUrl"></imgupload>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  name: 'approvals',
  data () {
    return {
      url: '',
      cos: {},
      imgUrl: 'https://ae01.alicdn.com/kf/Hd2535ca2055445a287cd651133591adfC.jpg'
    }
  },
  methods: {
    updatePhoto () {
      console.log(this.$refs.photo.files[0])
      let file = this.$refs.photo.files[0]
      // 初始化
      this.cos = new COS({
        SecretId: 'AKIDmNp32lDPKyLRHXbQ0LQFo7AxUmob7OPA', // 身份识别 ID
        SecretKey: 'XpseAQRChwwf7IDrEK9hz1oLcdOvDF1e' // 身份密钥
      })
      // 使用
      this.cos.putObject(
        {
          Bucket: 'sherlock-1307224010' /* 必须 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          console.log(err || data)
          this.url = 'http://' + data.Location
        }
      )
    }
  }
}
</script>

<style></style>
